<template>
  <el-form action="#" class="sign-up-form" ref="registerFormRef" :model="registerForm" :rules="registerRules"
           @submit.prevent="handleRegister" @keyup.enter="handleRegister">
    <h2 class="title">注册</h2>

    <el-form-item prop="username" class="custom-form-item">
      <div class="input-field">
        <i>
          <font-awesome-icon icon="fa-solid fa-user"/>
        </i>
        <input type="text" placeholder="用户名" v-model="registerForm.username"/>
      </div>
    </el-form-item>

    <el-form-item prop="email" class="custom-form-item">
      <div class="input-field">
        <i>
          <font-awesome-icon icon="fa-solid fa-envelope"/>
        </i>
        <input type="email" placeholder="邮箱" v-model="registerForm.email"/>
      </div>
    </el-form-item>

    <el-form-item prop="password" class="custom-form-item">
      <div class="input-field">
        <i>
          <font-awesome-icon icon="fa-solid fa-lock"/>
        </i>
        <input type="password" placeholder="密码" v-model="registerForm.password"/>
      </div>
    </el-form-item>

    <el-form-item prop="code" class="custom-form-item">
      <div class="code-container">
        <verification-code
            v-model:code="registerForm.code"
            :captcha-enabled="true"
            :code-url="codeUrl"
            @refresh="refresh"
        />
      </div>
    </el-form-item>

    <el-button type="primary" class="btn" @click="handleRegister">立即注册</el-button>
    <p class="social-text">通过其他方式</p>
    <div class="social-media">
      <a href="#" class="social-icon">
        <font-awesome-icon icon="fa-brands fa-qq"/>
      </a>
      <a href="#" class="social-icon">
        <font-awesome-icon icon="fa-brands fa-weixin"/>
      </a>
      <a href="#" class="social-icon">
        <font-awesome-icon icon="fa-brands fa-weibo"/>
      </a>
      <a href="#" class="social-icon">
        <font-awesome-icon icon="fa-brands fa-alipay"/>
      </a>
    </div>
  </el-form>
</template>

<script setup>
import {ref, defineProps, defineEmits, defineExpose} from 'vue';
import {ElMessage} from 'element-plus';
import VerificationCode from '@/components/verificationCode.vue';
import {register} from '@/api/login'

const props = defineProps({
  codeUrl: {
    type: String,
    required: true
  }
});

const emits = defineEmits(['refresh', 'register-success']);

// 注册表单
const registerForm = ref({
  username: "",
  email: "",
  password: "",
  code: "",
  uuid: ""
});

const registerRules = {
  username: [{required: true, trigger: "blur", message: "请输入您的用户名"}],
  email: [
    {required: true, trigger: "blur", message: "请输入您的邮箱"},
    {type: "email", message: "请输入正确的邮箱格式", trigger: "blur"}
  ],
  password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
  code: [{required: true, trigger: "change", message: "请输入验证码"}]
};

const registerFormRef = ref(null);

// 注册处理
const handleRegister = async () => {
  const valid = await registerFormRef.value.validate()
      .catch(() => false);

  if (!valid) {
    console.log('表单验证失败');
    return;
  }

  try {
    const res = await register(registerForm.value);
    // 注册成功处理
    if (res.code === 200) {
      ElMessage.success('注册成功，请登录');

      // 清空表单内容，但保留UUID
      const uuid = registerForm.value.uuid;
      registerFormRef.value.resetFields();
      registerForm.value.uuid = uuid;
      // 通知父组件注册成功
      emits('register-success');
    } else {
      ElMessage.error(res.msg || '注册失败，请重试');
      refresh(); // 刷新验证码
    }
  } catch (error) {
    console.error('注册请求失败:', error);
    ElMessage.error('注册请求失败，请稍后再试');
    refresh(); // 刷新验证码
  }
};

// 刷新验证码
const refresh = () => {
  emits('refresh');
};

// 设置UUID方法
const setUUID = (uuid) => {
  registerForm.value.uuid = uuid;
};

// 暴露给父组件的方法
defineExpose({
  setUUID
});
</script>

<style scoped>
/* 导入基础样式 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap');

/* 表单样式 */
.sign-up-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  opacity: 0;
  z-index: 1;
}

.title {
  font-size: 2.2rem;
  color: #444;
  margin-bottom: 10px;
}

.input-field {
  max-width: 380px;
  width: 100%;
  background-color: #f0f0f0;
  margin: 10px 0;
  height: 55px;
  border-radius: 55px;
  display: grid;
  grid-template-columns: 15% 85%;
  padding: 0 0.4rem;
  position: relative;
}

.input-field i {
  text-align: center;
  line-height: 55px;
  color: #acacac;
  transition: 0.5s;
  font-size: 1.1rem;
}

.input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
}

.input-field input::placeholder {
  color: #aaa;
  font-weight: 500;
}

.social-text {
  padding: 0.7rem 0;
  font-size: 1rem;
}

.social-media {
  display: flex;
  justify-content: center;
}

.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #333;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: #4481eb;
  border-color: #4481eb;
}

.btn {
  width: 150px;
  background-color: #5995fd;
  border: none;
  outline: none;
  height: 49px;
  border-radius: 49px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
}

.btn:hover {
  background-color: #4d84e2;
}

/* 自定义表单项样式 */
.custom-form-item {
  width: 100%;
  margin-bottom: 20px;
  position: relative;
}

.code-container {
  width: 100%;
  max-width: 380px;
}

/* 错误信息样式 */
:deep(.el-form-item__error) {
  font-size: 15px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #f56c6c;
}

/* 确保表单项内容居中 */
:deep(.el-form-item__content) {
  display: flex;
  justify-content: center;
  margin: 0 !important;
}

/* 移除Element Plus默认样式 */
:deep(.el-form-item.is-error .el-input__wrapper) {
  box-shadow: none;
}

@media (max-width: 570px) {
  .sign-up-form {
    padding: 0 1.5rem;
  }
}
</style>